<template>
  <layout :config="navConfig">
    <template #default>
      <div class="login-logo">
        <img src="../assets/img/SD-01.png" style="width: 100px;height: 100px">
        </div>
      <div class="login-input-item">
        <i class="iconfont icon-smartphone-line"></i>
        <input type="tel" placeholder="请输入手机号" v-model="formData.tel">
      </div>
      <!--<div class="login-input-item">-->
        <!--<i class="iconfont icon-shield-flash-line"></i>-->
        <!--<input type="text" placeholder="请输入验证码" v-model="formData.verCode">-->
        <!--<button-->
          <!--class="ver_code"-->
          <!--:disabled="!ableSendVerCode"-->
          <!--@click="sendMessage"-->
          <!--ref="sendButton"-->
        <!--&gt;发送验证码</button>-->
      <!--</div>-->
      <div class="login-input-item">
        <i class="iconfont icon-lock-password-line"></i>
        <input type="text" placeholder="请设置密码(6-16位数字与字母组合)" v-model="formData.password">
      </div>
      <div class="login-input-item">
        <i class="iconfont icon-lock-password-line"></i>
        <input type="text" placeholder="请再次输入密码" v-model="formData.confirmPass">
      </div>
      <div class="login-input-item">
        <i class="iconfont icon-message--line"></i>
        <input type="tel" placeholder="邀请账户(必填)" v-model="formData.code">
      </div>
      <button class="login-button" @click="handleSave">注册</button>
    </template>
  </layout>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { INavigation } from "@/types";
import { Toast } from 'mand-mobile'
@Component({
  name: "Register"
})
export default class extends Vue {
  navConfig: INavigation = {
    text: "注册"
  };

  ableSendVerCode: boolean = true;

  formData: object = {
    tel: "",
    password: "",
    confirmPass: "",
    code: ""
  };
  // 发送短信 - 接收验证码
  sendMessage(event: any, time: number = 60) {
    const targetEl: any = this.$refs.sendButton;
    this.ableSendVerCode = false;
    const endTime: number = Math.floor(new Date().getTime() / 1000) + time;
    const timer = setInterval(() => {
      const current: number = Math.floor(new Date().getTime() / 1000);
      if (current >= endTime) {
        clearInterval(timer);
        targetEl.innerHTML = "发送验证码";
        this.ableSendVerCode = true;
      } else {
        targetEl.innerHTML = `${endTime - current} s`;
      }
    }, 1000);
  };
    handleSave(){
        if(this.formData.tel==""){
            Toast.info("请输入手机号！");
            return;
        }
        if(this.formData.password==""){
            Toast.info("请输入密码！");
            return;
        }
        if(this.formData.confirmPass==""){
            Toast.info("请确认密码！");
            return;
        }
        if(this.formData.code==""){
            Toast.info("请输入邀请账户！");
            return;
        }

        this.$api.register({
            phone: this.formData.tel,
            sjphone: this.formData.code,
            username:this.formData.tel,
            pass:this.formData.password

        }).then(res => {
            console.log(res);
            if (res.success == 200) {
                Toast.info(res.data)
            } else {
                Toast.info(res.data.msg)
            }
        }).catch(res => {
            Toast.info("请求失败！");
        })
    }
}
</script>

<style lang="scss">
@import "../assets/styles/login.scss";
</style>